// We intentionally want to style all descendants with these classes.
// stylelint-disable selector-max-compound-selectors

.web-content {
    .theme-dark & {
        color: var(--body-color);

        --body-color: #{$gray-06};
        --link-color: #329af0;
    }
    .theme-light & {
        --link-color: #1c7cd6;
    }

    h1,
    h2 {
        color: $gray-08;

        .theme-light & {
            color: $gray-17;
        }
    }

    h3 {
        color: $gray-08;

        .theme-light & {
            color: $gray-15;
        }
    }

    h4 {
        .theme-light & {
            color: $gray-14;
        }
    }

    h5 {
        color: $gray-04;

        .theme-light & {
            color: $gray-13;
        }
    }
    h6 {
        color: $gray-04;

        .theme-light & {
            color: $gray-13;
        }
    }

    // Search examples that link to the results page should use this class.
    .search-query-link {
        color: var(--body-color);
    }
}
